<template>
  <div class="student">
    <div class="top-top">
      <div style="margin-right: 2%;">
        <el-input v-model="input" style="width: 240px;height: 100%;" placeholder="输入搜索关键词" @keyup.enter="seach"/>
        <el-button @click="seach" style="height: 100%;">
          <template #icon>
            <iconSeach></iconSeach>
          </template>
        </el-button>
      </div>
      <div style="margin-right: 2%;">
        <el-select v-model="selectValue" placeholder="切换班级" @change="select" style="width: 170px;height: 100%;">
      <el-option
        v-for="item in options"
        :key="item.cclassNub"
        :label="item.cclassName"
        :value="item.cclassNub"
      />
    </el-select>
      </div>
      <div style="margin-right: 2%;">
        <el-radio-group v-model.number="type" @change="status" class="ml-4">
          <el-radio :value=0 size="large">正常</el-radio>
          <el-radio :value=1 size="large">停学</el-radio>
        </el-radio-group> 
      </div>
    </div>
    <div class="main">
      <el-table :data="studentList" style="width: 100%;":row-style="{height:'55px'}" :header-row-style="{height:'55px'}" >
        <el-table-column prop="name" label="学生姓名" class="studentList" align="center"/>
        <el-table-column prop="number" label="学生学号" class="studentList" align="center"/>
        <el-table-column label="学生性别" class="studentList" align="center" #default="scope">
          <div v-if="scope.row.sex==0">男</div>
          <div v-else="scope.row.sex==1">女</div>
        </el-table-column>
        <el-table-column prop="phone" label="学生电话" class="studentList" align="center"/>
        <el-table-column label="状态" class="studentList" align="center" #default="scope">
          <div v-if="scope.row.state==0" style="color:green">正常</div>
          <div v-else="scope.row.state==1">停学</div>
        </el-table-column>
        <el-table-column label="操作" align="center" #default="scope">
          <el-button style="border: 0;margin: 0;" @click="editStudent(scope.row.id)">
            <template #icon>
              <iconEdit></iconEdit>
            </template>
          </el-button>
          <el-button style="border: 0;margin: 0;" @click="deleteStudent(scope.row.id)">
            <template #icon>
              <iconDelete></iconDelete>
            </template>
          </el-button>
          <el-button style="border: 0;margin: 0;" @click="password(scope.row.id)">
            <template #icon>
              <iconLoad></iconLoad>
            </template>
          </el-button>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total,prev, pager, next"
        @current-change="handleCurrentChange"
      />
    </div>
    </div>
  </div>

<!-- 编辑学生弹出框 -->
<el-dialog v-model="dialogFormStudent" title="编辑学生信息" width="500">
  <el-form :model="formStudent">
    <el-form-item label="学生姓名" >
      <el-input v-model="formStudent.name" autocomplete="off" />
    </el-form-item>
    <el-form-item label="学生学号">
      <el-input v-model.number="formStudent.number" autocomplete="off" />
    </el-form-item>
    <el-form-item label="学生性别">
      <el-radio-group v-model="formStudent.sex" class="ml-4">
          <el-radio :value=0 size="large">男</el-radio>
          <el-radio :value=1 size="large">女</el-radio>
        </el-radio-group> 
    </el-form-item>
    <el-form-item label="学生电话">
      <el-input v-model="formStudent.phone" autocomplete="off" />
    </el-form-item>
    <el-form-item label="状态" style="margin-left: 2em;">
      <el-radio-group v-model="formStudent.state" class="ml-4">
          <el-radio :value=0 size="large" style="color: green;">正常</el-radio>
          <el-radio :value=1 size="large">停学</el-radio>
        </el-radio-group> 
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormStudent = false">取消</el-button>
      <el-button type="primary" @click="submitUpdateStudent">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>

<!-- 重置密码弹出框 -->
<!-- <el-dialog v-model="dialogFormPassword" title="重置密码" width="500">
  <el-form :model="formPassword">
    <el-form-item label="重置密码" >
      <el-input v-model="formPassword.name" autocomplete="off" />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormPassword = false">取消</el-button>
      <el-button type="primary" @click="dialogFormPassword = false">
        确认
      </el-button>
    </div>
  </template>
</el-dialog> -->
</template>
<script setup>
import { ref,reactive } from 'vue';
import IconEdit from '../../../assets/edit.vue';
import IconSeach from '../../../assets/seach.vue';
import iconLoad from '../../../assets/load.vue';
import iconDelete from '../../../assets/delete.vue';
import {getStudentListAPI,getUpdateStudentInfoAPI,submitUpdateStudentInfoAPI,deleteStudentAPI,resetPasswordAPI} from '../../../api/teacher/student';
import { onMounted } from 'vue';
import { getSelectAPI } from '../../../api/teacher/work';
import { ElMessage, ElMessageBox } from 'element-plus';

const dialogFormStudent=ref(false)
const dialogFormPassword=ref(false)
const type=ref(0)
const total=ref(4)
const input=ref('')
const currentPage=ref(1)
const pageSize=ref(10)
const selectValue=ref()
const options = ref([
  {
    cclassNub: 0,
    cclassName: '一班',
  },
  {
    cclassNub: 1,
    cclassName: '二班',
  },
])
const formStudent = ref({
  id:0,
  name: 'dfsf',
  cclassName: 1,
  number: 342424,
  phone: '332342342342',
  delivery: false,
  sex:1,
  state:0
})
const formPassword = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const studentList = ref([
  {
    id: 1,
    name: 'Tom',
    number: 343253,
    phone:'123232323',
    state:0,
    sex:0,
    cclassNub:32
  },
  {
    id: 2,
    name: 'Tom',
    number: 343253,
    phone:'123232323',
    state:0,
    sex:0,
    cclassNub:32
  },
])
const seach=()=>{
  console.log('点击了搜索')
}
const select=()=>{
  console.log("点击了切换班级",selectValue)
  getStudentList()
}
const status=()=>{
  console.log("点击了学生状态",type.value)
  getStudentList()
}
const editStudent=async(id)=>{
  const result=await getUpdateStudentInfoAPI(id)
  formStudent.value=result.data.data
  dialogFormStudent.value=true
}
const deleteStudent=async(id)=>{
  console.log("删除学生",id)
  const result=await deleteStudentAPI(id)
  if(result.data.code==200){
    ElMessage.success("'删除成功'")
    getStudentList()
  }else{
    ElMessage.warning("'删除失败'")
  }
}

const password=async(id)=>{
  console.log("点击了重置密码",id)
  ElMessageBox.confirm(
    '确定要将学生密码重置为123456吗?',
    '重置密码',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      console.log("点击了重置密码",id)
      const result=await resetPasswordAPI(id)
      console.log("重置密码",result)
      ElMessage({
        type: 'success',
        message: '密码重置成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消重置密码',
      })
    })
  // const result=await resetPasswordAPI(id)
  // console.log("重置密码",result)
  // dialogFormPassword.value=true
}
//分页
const handleCurrentChange=()=>{
  console.log("当前页码数",currentPage.value)
  getStudentList()
}
//提交修改的学生
const submitUpdateStudent=async()=>{
  console.log("提交修改后的学生信息",formStudent.value)
  const result=await submitUpdateStudentInfoAPI(formStudent.value)
  if(result.data.code==200){
    ElMessage.success("'修改成功'")
    getStudentList()
    dialogFormStudent.value=false
  }else{
    ElMessage.warning("'修改失败'")
  }
}
//获取学生列表
const getStudentList=async()=>{
  let params={
    cclassNub:selectValue.value,//待定
    // cclassName:selectValue.value,//待定
    // number:11,//待定
    studentName:input.value,//待定
    pageNo:currentPage.value,
    pageSize:pageSize.value,
    state:type.value
  }
  console.log("提交到后台的数据",params)
  const result=await getStudentListAPI(params)
  studentList.value=result.data.data.list
  console.log("获取到的学生列表",result.data.data.list)
}
//获取切换班级下拉框
const getSelect=async()=>{
  const result=await getSelectAPI()
  options.value=result.data.data.classList
  console.log("获取到的拉下框",options.value)
  selectValue.value=result.data.data.classList[0].cclassNub
}
onMounted(()=>{
  getSelect().then(()=>{
    getStudentList()
  })

})
</script>
<style scoped>
.student{
  height: 100%;
  width: 100%;
  /* background-color: rgb(84, 84, 133); */
}
.top-top{
  width: 100%;
  height: 6%;
  display: flex;
  /* background-color: antiquewhite; */
}
:deep(.el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger){
  height: 100%;
  /* background-color: aqua; */
}
.main{
  width: 100%;
  height: 94%;
  /* background-color: rgba(0, 255, 255, 0.24); */
  margin-top: 1%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--el-box-shadow-light);
  border-radius:8px;
}
.studentList{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.page{
  /* margin: auto; */
  /* height: 32px; */
  width: 100%;
  /* margin-bottom: 10px; */
  /* background-color: rgb(85, 130, 168); */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* bottom: 0; */
  margin-top: auto;
  margin-bottom: 1%;
  /* margin-bottom: 44px; */
  /* bottom: 22px; */
  /* top:22px; */
}
:deep(.btn-prev){
  /* background-color: rgb(1, 85, 158); */
  height: 1em;
}
:deep(.number){
  /* background-color: rgb(54, 121, 180); */
  height: 1em;
}
:deep(.btn-next.is-last){
  /* background-color: antiquewhite; */
  height: 1em;
}
:deep(.el-pagination){
  height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
}
</style>